<template>
  <view class="type-select">
    <uni-popup ref="popup" type="bottom" @change="onChange">
      <view class="select-list">
        <view v-for="(item, index) in options" :key="index" :class="{'active':item.value==value}" class="select-item" @click="onSelect(item)">
          <text>{{ item.label }}</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: [Object, String, Number, Array],
      default() {
        return {};
      }
    },
    options: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  model: {
    prop: "value",
    event: "select"
  },
  data() {
    return {};
  },
  methods: {
    open() {
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    },
    onChange(e) {
      this.$emit("change", e);
    },
    onSelect(item) {
      this.close();
      this.$emit("select", item.value);
    }
  }
};
</script>

<style lang="scss" scoped>
.type-select {
  .select-list {
    background: #ffffff;
    .select-item {
      font-size: 28rpx;
      padding: 30rpx 0;
      text-align: center;
      border-bottom: 1px solid $uni-border-color;
    }
    .active {
      color: $themeColor;
    }
  }
}
</style>